<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aa{
            background: deeppink;
            width: 50px;
            height: 50px;
        }
        .bb{
            border: 1px solid skyblue;
        }
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
 <div id="div1" style="width: 500px;height : 500px;background-color: skyblue" @contextmenu.prevent>
     <div id="div2" @click="div2Click" style="width: 300px;height : 300px;background-color: gold">
         <div id="div3" @click="div3Click($event)" style="width: 100px;height : 100px;background-color: darkred">
             点击
         </div>
         <a href="http://www.baidu.com" @click.prevent.stop="write($event)">摆渡</a>
         <input type="text" placeholder="用户名" @keydown.aa="print($event)"  v-model="imgWidth"><br>
         <input type="text" placeholder="密码" @keydown.13="print($event)" v-model="imgHeight"><br>
         <input type="button" value="登录" v-if="flag">
         <img :src="imgUrl" :width="imgWidth" :height="imgHeight">
<!--         <div :class="style1"></div>-->
         <div :class="{aa:style1Flag,bb:style1Flag}"></div>
<!--         <div :style="style2"></div>-->
         <div :style="style3">ssss</div>
         <p><span v-cloak>{{username}}</span></p>
         {{style1}}
     </div>
 </div>
</body>
<script src="vue.js"></script>
<script>
    Vue.config.keyCodes={
        "aa":65,
        "回车":13
    }
new Vue({
    el:"#div1",
    data:{
        flag:false,
        style1:"aa",
        style1Flag:true,
        style2:"border: 1px solid skyblue;  background: #517520;  width: 50px; height: 50px;",
        style3:{border:"10px solid #123456",fontSize:200+"px"},

        username:"小虎",

        imgWidth:100,
        imgHeight:100,
        imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590664456269&di=2c9168183578f4d291fcdb3be711c04f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn14%2F274%2Fw640h434%2F20180723%2Fb828-hftenhy9380802.jpg"

    },
    methods:{
        div1Click(){
            console.log("div1")
        },
        div2Click(){
            console.log("div2")
        },
        div3Click(e){
            console.log("div3")
            e.stopPropagation();
        },
        write(e){
            // e.preventDefault();
            // e.stopPropagation();
        },
        print(e) {
            console.log("按了")
            this.flag=!this.flag;
        }


    },
    created:function () {
        alert("444")
    }
});
    function d3elick(e) {
        e.stopPropagation()
        console.log(e)
        console.log(e.type)
        console.log(e.target)
    }
</script>
</html>